<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_162')}}</h2>
            <div class="personCon">
                <div class="createpanel clearfix">
                    <h2 class="persontitle">{{$t('l.personal_162')}}</h2>
                    <div class="invitebar fl">
                        <div class="codelink">
                            <span style="font-familyA:Roboto;font-weight:500;padding-top:20px;">{{invitecode}}</span>
                            <a v-clipboard:copy="invitecode" v-clipboard:success="onCopy" v-clipboard:error="onError">{{$t('l.personal_163')}}</a>
                        </div>
                        <div class="codelink" style="padding-left:15px;">
                            <span style="font-size:16px;padding-top:10px;">{{inviteUrl}}</span>
                            <a v-clipboard:copy="inviteUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">{{$t('l.personal_164')}}</a>
                        </div>
                    </div>
                    <div class="commintotal">
                        <p class="comtitle">{{$t('l.personal_165')}}</p>
                        <p class="comval">≈{{todayRakeBack}}</p>
                    </div>
                    <div class="commintotal">
                        <p class="comtitle">{{$t('l.personal_166')}}</p>
                        <p class="comval">≈{{totalRakeBack}}</p>
                    </div>
                    <!-- 测试把合并的图片进行渲染 -->
                    <!-- <img :src="'data:image/jpeg;base64,' + downloadUrl"/> -->
                    <!-- qrcode生成二维码的容器，不可删 -->
                    <div id="qrcode"></div>
                    <div class="posters" @click="bannerList">
                        <span>{{$t('l.personal_274')}}</span>
                    </div>
                </div>
                <div class="createpanel clearfix">
                    <div class="invittitle clearfix">
                        <div class="checktab fl">
                            <a :class="type?'active':''" @click="type=true">{{$t('l.personal_167')}}</a>
                            <a :class="!type?'active':''" @click="type=false">{{$t('l.personal_168')}}</a>
                        </div>
                        <div class="fr" v-show="!type">
                            <span class="grouptitle">{{$t('l.trade_36')}}</span>
                            <select class="headselect" v-model="backType">
                                <option value="">{{$t('l.trade_77')}}</option>
                                <option value="game">{{$t('l.personal_169')}}</option>
                                <option value="exchange">{{$t('l.personal_170')}}</option>
                                <option value="agent">{{$t('l.personal_171')}}</option>
                                <option value="future">{{$t('l.personal_172')}}</option>
                            </select>
                            <span class="grouptitle">{{$t('l.personal_146')}}</span>
                            <el-date-picker
                                v-model="begin"
                                type="date"
                                :placeholder="$t('l.personal_147')"
                                class="fl left10"
                                value-format="yyyy-MM-dd"
                                >
                            </el-date-picker>
                            <el-date-picker
                                v-model="end"
                                type="date"
                                :placeholder="$t('l.personal_148')"
                                class="fl left10"
                                value-format="yyyy-MM-dd"
                                >
                            </el-date-picker>
                            <a class="headbtn fl" style="margin-left:20px;" @click="search">{{$t('l.personal_131')}}</a>
                            <a class="headbtn fl" style="margin-left:4px;" @click="reset">{{$t('l.personal_132')}}</a>
                        </div>
                    </div>
                    <div class="apikey">
                        <table class="apikeytable" v-show="type">
                            <thead>
                                <tr>
                                    <th>{{$t('l.personal_173')}}</th>
                                    <th>{{$t('l.personal_174')}}</th>
                                    <th>{{$t('l.personal_175')}}</th>
                                    <th>{{$t('l.personal_176')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in invitelist" :key="index">
                                    <td>{{item.createdDate}}</td>
                                    <td>{{item.userCode}}</td>
                                    <td>
                                        <span v-if="item.userType==0 || item.userType==1">{{$t('l.personal_177')}}</span>
                                        <span v-else-if="item.userType==2">{{$t('l.personal_178')}}</span>
                                        <span v-else-if="item.userType==3">{{$t('l.personal_179')}}</span>
                                        <span v-else-if="item.userType==4">{{$t('l.personal_180')}}</span>
                                    </td>
                                    <td>{{item.country?item.country:$t('l.personal_4')}}</td>
                                </tr>
                                <tr  v-if="invitelist && invitelist.length==0">
                                    <td colspan="4">
                                        <div class="nodata" style="padding:80px 0">
                                            <img src="../../assets/images/7c57ae4.svg">
                                            <p style="text-align: center;    color: #33385E;    line-height: 20px;    padding-top: 3px;">{{$t('l.personal_140')}}</p>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="apikeytable" v-show="!type">
                            <thead>
                                <tr>
                                    <th>{{$t('l.home_11')}}</th>
                                    <th>{{$t('l.advert_about9')}}</th>
                                    <th>{{$t('l.advert_about25')}}</th>
                                    <th>{{$t('l.personal_146')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in backlist" :key="index">
                                    <td>{{item.currency}}</td>
                                    <td>{{item.rakeBackAmount}}</td>
                                    <td>
                                        <span v-if="item.type=='agent'">{{$t('l.personal_171')}}</span>
                                        <span v-else-if="item.type=='future'">{{$t('l.personal_172')}}</span>
                                        <span v-else-if="item.type=='exchange'">{{$t('l.personal_170')}}</span>
                                        <span v-else-if="item.type=='game'">{{$t('l.personal_169')}}</span>
                                    </td>
                                    <td>{{item.settleTime}}</td>
                                </tr>
                                <tr  v-if="backlist && backlist.length==0">
                                    <td colspan="4">
                                        <div class="nodata" style="padding:80px 0">
                                            <img src="../../assets/images/7c57ae4.svg">
                                            <p style="text-align: center;    color: #33385E;    line-height: 20px;    padding-top: 3px;">{{$t('l.personal_140')}}</p>
                                        </div>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>

                <div class="pagesbar" v-if="backtotal>0 && !type" style="text-align:center;margin-top:20px;">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        hide-on-single-page="true"
                        @current-change="handleCurrentChange"
                        :current-page="backPageNum"
                        :page-size="backPageSize"
                        :total="backtotal">
                    </el-pagination>
                </div>

                <!-- <div ref="box" style="width: 325px;position: relative;">
                    <img width="325px" height="450px" :src="bannerImgUrl">
                    <img style="height: 54px;position: absolute;bottom: 24px;right: 50px;z-index: 99;" :src="qrcodeurl">
                </div>
                <canvas id="canvas" width="" height=""></canvas> -->
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import QRCode from 'qrcodejs2';
import html2canvas from 'html2canvas';
import Canvas2Image from 'canvas2image';
import { constants } from 'fs';
// import VueClipboard from 'vue-clipboard2'
// Vue.use(VueClipboard)
export default {
    components: {
        PersonalHeader,
        PersonalSide,
    },
    data() {
        return {
            invitecode:"",
            inviteUrl:"",
            invitelist:[],
            type:true,
            begin:"",
            end:"",
            backPageNum:1,
            backPageSize:10,
            backtotal:0,
            backType:"",
            backlist:[],
            todayRakeBack:0,
            totalRakeBack:0,
            bannerImgUrl: "",
            downloadUrl: "",
            qrcodeurl:""
        }
    },
    created(){
        this.getinvitelist();
        //this.bannerList();
    },
    methods:{
        // 展示生成的弹框
        showInvite(image) {
            let that = this;
            const h = this.$createElement;
            // j加一个 VNode
            console.log(image);
            this.$msgbox({
                title: that.$t('l.add_133'),
                message: h('div', {style: 'text-align: center;margin-top: 20px;', attrs: {id: "div",ref:'box'}},[
                    h('img', {style: 'height: 54px; position: absolute;bottom: 36px;right: 98px;z-index: 99;', attrs: {id: "qrcode2",src: image}}),
                    h('img', {style: 'height: 450px;width: 325px;', attrs: {src: this.bannerImgUrl}}),
                ]),
                confirmButtonText: that.$t('l.add_134'),
                beforeClose: (action, instance, done) => {
                    // console.log(action,instance,done)
                    // console.log(image);
                     if (action === 'confirm') {
                        // instance.confirmButtonLoading = true;
                        that.drawCanvas1(image);
                        // instance.confirmButtonText = '执行中...';
                    } else {
                        done();
                    }
                    // if (action === 'confirm') {
                    //     // 调用下载图片的接口
                    //     // alert("hahaha");
                    //     instance.confirmButtonLoading = true;
                    //     // instance.confirmButtonText = '执行中...';

                    //     // 事件执行成功后关闭confirmButtonLoading
                    //     instance.confirmButtonLoading = false;

                    // }else{
                    //     this.$layer.msg("请稍后重试");
                    // }
                }
                }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
            });

            //that.drawCanvas(image);
        },
        // 合成图片
        drawCanvas1(imageData){
            var self = this;
            var imgsrcArray = [
                self.bannerImgUrl,
                imageData
            ];
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = 325;
            canvas.height = 450;
            var imglen = imgsrcArray.length;
            var drawimg = (function f(n){
                if(n < imglen){
                    var img = new Image();
                    //解决跨域问题
                    img.setAttribute('crossOrigin','anonymous');
                    img.crossOrigin = 'Anonymous'; //解决跨域问题
                    img.onload = function(){
                        //ctx.save();
                        if(n == 0){
                            ctx.drawImage(img,0,0,325,450);
                        }else{
                            ctx.drawImage(img,225,373,54,54);
                        }
                        f(n+1);
                    }

                    img.src = imgsrcArray[n];
                }else{
                    self.downloadUrl = canvas.toDataURL("image/jpeg");
                    //self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");
                    //let jpgurl = self.dataURLtoFile(self.downloadUrl);
                    var myBlob = self.dataURLtoBlob(self.downloadUrl)
                        var myUrl = URL.createObjectURL(myBlob)
                    let a = document.createElement("a"); // 生成一个a元素
                    a.download = "photo"; // 设置图片名称
                    a.href = myUrl; // 将生成的URL设置为a.href属性
                    if(self.downloadUrl){

                        a.click(); // 触发a的单击事件
                    }
                }
            })(0);
        },
        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        dataURLtoFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let suffix = mime.split('/')[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime
            })
        },
        //生成二维码
        getQrcode() {
            let that = this;
            let qrcode = new QRCode('qrcode', {
                width: 100,
                height: 100, // 高度
                text: that.inviteUrl, // 二维码内容
                colorDark : "#000",
                colorLight : "#fff",
            })
            console.log(qrcode);

            let mycanvas1 = document.getElementsByTagName('canvas')[0];

            let img = convertCanvasToImage(mycanvas1);

            function convertCanvasToImage(canvas) {

            let image =new Image();
            // 拿到二维码的data：base64
            image.src = canvas.toDataURL("image/png");
            that.showInvite(image.src);
            that.qrcodeurl = image.src;
            // return image;
        }
        },
        search(){
            let that = this;
            that.backPageNum = 1;
            that.getrakeBacklist();
        },
        handleCurrentChange(val) {
            this.backPageNum = val;
            this.getrakeBacklist();
        },
        reset(){
            let that = this;
            that.begin = "";
            that.end = "";
            that.backType = "";
        },
        // 复制成功
        onCopy(e){
            this.$layer.msg(this.$t('l.personal_48'));
        },
        // 复制失败
        onError(e){
            alert("失败");
        },
        async getinvitelist() {
            let that = this;
            let params = {
                pageNum: 1,
                pageSize: 10000
            };
            let res = await api.inviteList(params);
            if (res.data.code == 0) {
                that.invitecode = res.data.data.inviteCode;
                that.inviteUrl = res.data.data.inviteUrl;
                that.invitelist = res.data.data.inviteUserList.records;
            } else {
                this.$layer.msg(res.data.msg);
            }
        },
        // 邀请海报
        async bannerList() {
            let that = this;
            let params = {
                category: 2,
                platform: 1,
            };
            let res = await api.bannerList(params);
            if (res.data.code == 0) {
                that.bannerImgUrl = res.data.data[0].bannerImgUrl;
                this.getQrcode();
            } else {
                this.$layer.msg(res.data.msg);
            }
        },
        //返佣列表
        async getrakeBacklist() {
            let that = this;
            let params = {
                endDate: that.end,
                pageNum: that.backPageNum,
                pageSize:that.backPageSize,
                startDate:that.begin,
                type:that.backType
            };
            let res = await api.rakeBacklist(params);
            if (res.data.code == 0) {
                that.backlist = [];
                that.backlist = res.data.data.records;
                that.backtotal = res.data.data.total;
                that.backPageNum = res.data.data.current;
            } else {
                this.$layer.msg(res.data.msg);
            }
        },
        //返佣汇总
        async getsummary() {
            let that = this;
            let res = await api.summary();
            if (res.data.code == 0) {
                that.todayRakeBack = res.data.data.todayRakeBack
                that.totalRakeBack = res.data.data.totalRakeBack
            } else {
                this.$layer.msg(res.data.msg);
            }
        },
    },
    mounted(){
        this.getrakeBacklist();
        this.getsummary();
    }
}
</script>
<style lang="less" scoped>
.personalHome {
	padding-top: 100px;
}
#qrcode {
    display: none;
    img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
    }
}
.el-message-box{
    width:426px;
    height:625px;
    position: relative;
    .el-message-box__header{
        background:rgba(240,242,253,1);
        height: 55px;
        box-sizing: border-box;
        .el-message-box__title{
            line-height: 1.5;
            span{
                font-size:16px;
                font-family:PingFangSC;
                font-weight:600;
                color:rgba(51,56,94,1);
            }
        }
    }
    .el-message-box__btns{
        position: absolute;
        bottom: 26px;
        left: 38px;
        .el-button--primary{
            width: 328px;
            height: 40px;
            background:linear-gradient(90deg,rgba(171,171,252,1) 0%,#2D8DFE 100%);
            border-radius:4px;
        }
    }
}

.personCon{
    overflow: auto;
    padding:24px 30px;
    box-sizing: border-box;
    height: 94%;
    .el-date-editor.el-input{width: 150px;height: 32px;}
    .el-input__inner{height:34px;}
    .el-input__icon{line-height:34px;}
    .createpanel{
        background:#fff;
        padding:40px 46px 20px 34px;
        box-sizing: border-box;
        // margin-bottom:24px;
        .invittitle{
            padding-bottom:22px;
            .grouptitle{
                float:left;
                padding-left :20px;
                font-size:16px;
                color:#33385E;
                line-height:32px;
                padding-right:10px;
            }
            .headselect{
                float:left;
                width:103px;
                height:32px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                text-indent:10px;
                margin-right:30px;
            }
            .padl20{
                padding-left:20px;
            }
            .left10{
                margin-left:10px;
            }
            .checktab{
                padding-right:24px;
                a{
                    width:82px;
                    height:32px;
                    border:1px solid rgba(221,224,235,1);
                    box-sizing: border-box;
                    text-align:center;
                    color:rgba(51,56,94,1);
                    line-height:32px;
                    float:left;
                    cursor: pointer;
                    &:first-child{
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                    }
                    &:last-child{
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                    &.active{
                        background:#2D8DFE;
                        background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
                        color:#fff;
                        border:none;
                    }
                }
            }
        }
        .posters{
            min-width:170px;
            height:50px;
            background:#2D8DFE;
            background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
            border-radius:4px;
            float:left;
            margin-left:2%;
            margin-top:100px;
            line-height: 50px;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
            span{
                font-size:16px;
                font-family:PingFangSC;
                font-weight:500;
                color:rgba(255,255,255,1);
                text-shadow:0px 2px 4px rgba(66,66,237,1);
            }
        }
        .commintotal{
            float:left;
            width:180px;
            height:161px;
            background:rgba(249,249,255,1);
            border-radius:5px;
            border:1px solid rgba(221,224,235,1);
            margin-left:10px;
            margin-top:44px;
            .comtitle{
                font-size:16px;
                color:#2D395C;
                line-height:30px;
                text-align:center;
                padding-top:42px;
                padding-bottom:14px;
            }
            .comval{
                color:#2D8DFE;
                font-size:24px;
                font-familyA:Roboto;
                line-height:30px;
                text-align:center;
            }
        }
        .invitebar{
            padding:44px 1% 0 0;
            .codelink{
                height:60px;
                background:rgba(249,249,255,1);
                border-radius:5px;
                border:1px solid rgba(221,224,235,1);
                padding-right:20px;
                min-width:380px;
                box-sizing: border-box;
                padding-left: 30px;
                padding-right: 20px;
                margin-bottom:40px;
                span{
                    font-size:20px;
                    color:#2D395C;
                    line-height:20px;
                    float: left;
                    width: 60%;
                    word-wrap: break-word;
                }
                a{
                    float: right;
                    margin-top: 10px;
                    background:rgba(115,115,247,0.12);
                    border-radius:6px;
                    padding:0 15px;
                    color:#2D8DFE;
                    font-size:14px;
                    line-height: 40px;
                    cursor: pointer;
                }
            }
        }
        .apikey{
            .apikeytable{
                width:100%;
                thead tr{
                    background:#f2f6fa;
                    th{
                        line-height:50px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        font-size:14px;
                    }
                }
                tbody tr{
                    border-bottom:1px solid #F2F6FA;
                    td{
                        font-size:14px;
                        font-weight:400;
                        color:rgba(51,56,94,1);
                        line-height:50px;
                        text-align:center;
                        .status{
                            position:relative;
                            padding-left:14px;
                            display: inline-block;
                            &:after{
                                position:absolute;
                                content:"";
                                width:6px;
                                height:6px;
                                left:4px;
                                top:22px;
                                border-radius:50%;
                                background:#52C41A;
                            }
                        }
                        .probtn{
                            font-size:14px;
                            font-weight:400;
                            color:#2D8DFE;
                            line-height:50px;
                            padding:0 10px;
                            height: 50px;
                            display: block;
                            position:relative;
                            cursor:pointer;
                            &.active{
                                .delapikey{display:block;}
                            }
                        }
                        .delapikey{
                            position:absolute;
                            background:#fff;
                            border-radius:4px;
                            padding:18px;
                            width: 220px;
                            box-sizing: border-box;
                            box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
                            z-index: 9;
                            top: -90px;
                            right: 15px;
                            padding-bottom: 4px;
                            display:none;
                            &:after{
                                content:"";
                                position:absolute;
                                width:10px;
                                height:6px;
                                background:url(../../assets/images/Triangle1@2x.png) no-repeat center;
                                bottom:-6px;
                                right:67px;
                            }
                            p{
                                color:rgba(51,56,94,1);
                                line-height:22px;
                                padding-left:20px;
                                text-align: left;
                                background:url(../../assets/images/tip1.png) no-repeat center left;
                                background-size: 16px 16px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
